<template>
  <view class="real-name-auth-page">

    <view class="fill-area">
      <van-field
        :value="username"
        label="姓名"
        placeholder="请填写真实姓名"
        :readonly="status === 1 || status === 0"
        @change="handleChangeName"
      />

      <van-cell title="性别" custom-class="cell-sex">
        <van-radio-group
          :disabled="status === 1 || status === 0"
          custom-class="sex-radio-wrap"
          :value="gender"
          @change="handleChangeSex"
        >
          <van-radio
            name="1"
            custom-class="radio-sex"
          >男
          </van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
      </van-cell>

      <van-field
        :value="id_no"
        label="身份证号"
        placeholder="请填写身份证号"
        border
        :readonly="status === 1 || status === 0"
        @change="handleChangeIdNo"
      />
    </view>

    <view class="upload-region">
      <view class="tip">请上传本人真实身份证照片</view>

      <view class="id-card-upload-wrap">

        <view class="left" @click="handleSelectImage">
          <view class="image-wrap">
            <template v-if="cart_img1">
              <image :src="ftp + cart_img1"></image>
            </template>
            <template v-else>
              <image src="/static/image/id-z.png"></image>
            </template>
          </view>
          <view class="text">身份证正面照</view>
        </view>

        <view class="right" @click="handleSelectBImage">
          <view class="image-wrap">
            <template v-if="cart_img2">
              <image :src="ftp + cart_img2"></image>
            </template>
            <template v-else>
              <image src="/static/image/id-f.png"></image>
            </template>
          </view>
          <view class="text">身份证反面照</view>
        </view>

      </view>
    </view>

    <view class="err-tip" v-if="status && status !== 1">
      <view>
        <template v-if="status === 0">
          审核状态：审核中
        </template>
        <template v-if="status === 2">
          审核状态：拒绝（{{remark}}）
        </template>
      </view>
    </view>

    <view class="bottom-btn">
      <van-button
        color="#FF9600"
        custom-class="button-cus"
        type="primary"
        @click="handleSubmit"
      >上传
      </van-button>
    </view>

    <van-toast id="van-toast"/>

  </view>
</template>

<script>
import Toast from 'wxcomponents/vant/toast/toast';

const app = getApp()
export default {
  data() {
    return {
      ftp: '',
      username: '',
      gender: '1',
      id_no: '',
      cart_img1: '',
      cart_img2: '',
      status: '',
      remark: '',
      genderMapValue: {
        '男': '1',
        '女': '2'
      }
    }
  },
  methods: {
    handleChangeName(res) {
      console.log(res);
      const {
        detail
      } = res

      this.username = detail
    },
    handleChangeSex(res) {
      this.gender = res.detail
    },
    handleChangeIdNo(res) {
      const {
        detail
      } = res

      this.id_no = detail
    },
    handleSelectImage() {
      const that = this

      if (this.status === 1 || this.status === 0) {
        return
      }

      uni.chooseImage({
        count: 1,
        success(res) {
          const {
            tempFilePaths
          } = res
          let url = tempFilePaths[0]

          app.upload(url, {}, '/api/common/upload').then((res) => {
            console.log(res)
            const {
              code,
              data,
              msg
            } = res

            if (code === 1) {
              const {
                url
              } = data

              that.cart_img1 = url
            } else {
              Toast(msg)
            }
          })
        }
      })
    },
    handleSelectBImage() {
      const that = this

      if (this.status === 1 || this.status === 0) {
        return
      }

      uni.chooseImage({
        count: 1,
        success(res) {
          const {
            tempFilePaths
          } = res
          let url = tempFilePaths[0]

          app.upload(url, {}, '/api/common/upload').then((res) => {
            console.log(res)
            const {
              code,
              data,
              msg
            } = res

            if (code === 1) {
              const {
                url
              } = data

              that.cart_img2 = url
            } else {
              Toast(msg)
            }
          })
        }
      })
    },
    handleGetRealNameAuthInfo() {
      app.request({}, '/api/logistics/user/real_info').then((res) => {
        console.log(res)
        const {
          code,
          data,
          msg
        } = res

        if (code === 1) {
          if (data) {
            const {
              username,
              gender,
              id_no,
              cart_img1,
              cart_img2,
              status,
              remark
            } = data

            this.username = username
            this.gender = this.genderMapValue[gender]
            this.id_no = id_no
            this.cart_img1 = cart_img1
            this.cart_img2 = cart_img2
            this.status = parseInt(status)
            this.remark = remark
          } else {}
        } else {
          this.status = null
        }
      })
    },
    handleSubmit() {
      const {
        status
      } = this

      if (status === 0 || status === 1) {
        Toast('当前状态不能操作')
        return;
      }

      const {
        username,
        gender,
        id_no,
        cart_img1,
        cart_img2,
      } = this

      if (!username) {
        Toast('请输入姓名')
        return;
      }
      if (!id_no) {
        Toast('请输入身份证号')
        return;
      }
      if (!cart_img1) {
        Toast('请上传身份证正面照片')
        return;
      }
      if (!cart_img2) {
        Toast('请上传身份证背面照片')
        return;
      }

      Toast.loading({
        message: '加载中',
        mask: false,
        duration: 0,
        zIndex: 9999999,
        forbidClick: true
      })
      app.request({
        username,
        gender,
        cart_img1,
        cart_img2,
        id_no,
      }, '/api/logistics/user/auth_user').then((res) => {
        const {
          code,
          data,
          msg
        } = res

        if (code === 1) {
          const {

          } = data
          Toast('上传成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 600)

        } else {
          Toast(msg)
        }
      })

    }
  },
  onLoad() {
    this.ftp = app.globalData.ftp
    this.handleGetRealNameAuthInfo()
  },
}
</script>

<style lang="scss">
.real-name-auth-page {
  min-height: 100vh;
  background-color: #F2F2F2;

  .fill-area {
    margin: 18rpx 0;

    .cell-sex {
      .van-cell__title {
        max-width: 6.2em;
        min-width: 6.2em;
        margin-right: 12px;
      }
    }

    .van-radio-group {
      display: flex;
    }

    .sex-radio-wrap {
      display: flex;
    }

    .radio-sex {
      margin-right: 36rpx;
    }
  }

  .upload-region {
    width: 100%;
    height: 308rpx;
    background-color: #fff;
    padding-top: 1px;

    .tip {
      text-align: center;
      font-size: 28rpx;
      margin: 40rpx 0;
    }

    .id-card-upload-wrap {
      display: flex;

      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;

        .image-wrap {
          width: 150rpx;
          height: 100rpx;
          margin-bottom: 30rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .text {
          font-size: 26rpx;
          color: #999999;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;

        .image-wrap {
          width: 150rpx;
          height: 100rpx;
          margin-bottom: 30rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .text {
          font-size: 26rpx;
          color: #999999;
        }
      }

    }

  }

  .err-tip {
    width: 100%;
    padding: 22rpx 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #ee0a24;
  }

  .bottom-btn {
    width: 100%;
    padding: 20rpx;
    margin-top: 20rpx;
    box-sizing: border-box;

    .button-cus {
      width: 100%;
    }
  }
}
</style>
